import React, { Component, Fragment } from "react";

export default class Seat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        ["", 1,2, 3, 4, 5, 6, 7, 8],
        ["", 1, 2, 3, 4, 5, 6, 7, 8, ""],
        ["", 1, 2, 3, 4, 5, 6, 7, 8, ""],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      ],
    };
  }

  componentDidMount(){
      let newList  = this.state.list.map((list,index)=>{
          
        return  list.map(item=>{
            if(item){
                return {x:index+1,y:item,checked:false,selled:false}
            }
            return  item;
        })

      })
      //console.log(newList);
      this.setState({
        list:newList
      })

  }
  changeChecked  = (info)=>{
    info.checked = !info.checked;
    if(info.checked){//选中
        this.props.addSellList(info);
    }else{
        this.props.delSellList(info);
    }
    
  }

  render() {

    //console.log("接收的数据为",this.props.sellList);
    let sellList = this.props.sellList;//表示已经卖了的座位
    this.state.list.forEach(itemList=>{  //item是 引用类型
            itemList.forEach(item=>{ //这才是目标对象
                let  x  = item.x;
                let y = item.y;
                if(sellList.some(info=>info.x===x && info.y ===y&& info.selled)){
                    item.selled =true;
                }
            })  
    })
  //  console.log("数据",this.state.list);

    return (
      <div>
        <h3>选座</h3>
        <div className="seat">
          {this.state.list.map((item, index) => {//外层循环
            return (
              <div className="seat-tr" key={index}>
                {item.map((info, index2) => {//里面的循环 info 是对象
                  return (
                    <Fragment key={index2}>
                    {info?

                    !info.selled?
                    
                    <div className={info.checked?"seat-td active":"seat-td"} onClick={(e)=>{
                            this.changeChecked(info);
                    }}>
                    {info.x + "*" + info.y}
                  </div>:<div className="seat-td disabled">{info.x +"*" +info.y} </div>:<div className="seat-td" style={{visibility:"hidden"}}></div>}
                  </Fragment>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
